<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="press-composer-layers.css">
    <script type="text/montage-serialization">
    {
        "owner": {
            "values": {
                "element": {"#": "owner"},
                "overlay": {"@": "overlay"}
            }
        },

        "showOverlay": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "show-overlay-button"},
                "label": "Show Overlay"
            }
        },

        "textField": {
            "prototype": "montage/ui/text-field.reel",
            "values": {
                "element": {"#": "text-field"}
            }
        },

        "overlay": {
            "prototype": "montage/ui/overlay.reel",
            "values": {
                "element": {"#": "overlay"},
                "position" : {
                    "left" : 105,
                    "top" : 100
                }
            }
        },

        "dismissOverlay": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "dismiss-overlay-button"},
                "label": "Hide Overlay"
            }
        }
    }
    </script>
</head>
<body>
    <div data-montage-id="owner" class="PressComposerLayers">
        <button data-montage-id="show-overlay-button">Show Overlay</button>
        <input data-montage-id="text-field" type="text" />

        <div data-montage-id="overlay" class="PressComposerLayers-Overlay">
            <button data-montage-id="dismiss-overlay-button">Show Overlay</button>
        </div>
    </div>
</body>
</html>
